{% extends 'base.html' %}

<!--头部样式-->
{% block head %}
<style>
    * {
        /*margin: 0;*/
        /*padding: 0;*/
        /*box-sizing: border-box;*/
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    :root {
        --primary-color: #1e80ff;
        --secondary-color: #6e6e6e;
        --bg-color: #f7f8fa;
        --card-bg: #ffffff;
        --border-color: #e5e6eb;
        --hover-color: #f2f3f5;
        --success-color: #00c853;
        --danger-color: #f56c6c;
        --warning-color: #ffc107;
    }

    /*body {*/
    /*    background-color: var(--bg-color);*/
    /*    color: #333;*/
    /*    line-height: 1.6;*/
    /*}*/

    .usercontainer {
        display: flex;
        max-width: 1320px;
        margin: 30px auto;
        gap: 20px;
        /*box-sizing: border-box;*/
    }

    /* 左侧菜单样式 */
    .usersidebar {
        width: 240px;
        background: var(--card-bg);
        border-radius: 12px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
        padding: 20px 0;
        line-height: 1.6;
        height: fit-content;
    }

    .user-profile {
        display: flex;
        align-items: center;
        padding: 0 20px 20px;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 10px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 12px;
        border: 2px solid var(--primary-color);
    }

    .side-user-info h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .side-user-info p {
        color: var(--secondary-color);
        font-size: 14px;
    }

    .u-menu {
        list-style: none;
        padding-left: 0;
    }

    .u-menu-item {
        padding: 14px 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }

    .u-menu-item:hover {
        background-color: var(--hover-color);
        color: var(--primary-color);
    }

    .u-menu-item.active {
        background-color: #e8f4ff;
        color: var(--primary-color);
        border-left-color: var(--primary-color);
    }

    .u-menu-item i {
        margin-right: 12px;
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

    /* 右侧内容区样式 */
    .content {
        flex: 1;
        min-height: 80vh;
    }

    .content-section {
        background: var(--card-bg);
        border-radius: 12px;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
        padding: 24px;
        margin-bottom: 20px;
        display: none;
    }

    .content-section.active {
        display: block;
        animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

    .section-title {
        font-size: 20px;
        font-weight: 600;
        color: #1d2129;
    }

    /* 文章列表样式 */
    .article-list {
        list-style: none;
        padding-left: 0;
    }

    .article-item {
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        transition: background-color 0.3s;
    }

    .article-item:hover {
        background-color: var(--hover-color);
    }

    .article-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .article-title {
        font-size: 18px;
        font-weight: 600;
        color: #1d2129;
        text-decoration: none;
        transition: color 0.3s;
    }

    .article-title:hover {
        color: var(--primary-color);
    }

    .article-meta {
        display: flex;
        color: var(--secondary-color);
        font-size: 14px;
        margin-top: 8px;
    }

    .article-meta span {
        margin-right: 16px;
    }

    /* 表格样式 */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
    }

    th, td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    th {
        background-color: #f9f9f9;
        font-weight: 600;
    }

    /* 按钮样式 */
    .btn {
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
    }

    .btn i {
        margin-right: 6px;
    }

    .btn-primary {
        background-color: var(--primary-color);
        color: white;
    }

    .btn-primary:hover {
        background-color: #0d6efd;
    }

    .btn-danger {
        background-color: var(--danger-color);
        color: white;
    }

    .btn-danger:hover {
        background-color: #dc3545;
    }

    .btn-success {
        background-color: var(--success-color);
        color: white;
    }

    .btn-success:hover {
        background-color: #28a745;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }

    /* 表单样式 */
    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.3s;
    }

    .form-control:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(30, 128, 255, 0.2);
    }

    /* 标签样式 */
    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
    }

    .tag {
        padding: 6px 12px;
        background-color: #f2f3f5;
        border-radius: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .tag-edit {
        cursor: pointer;
        color: var(--primary-color);
    }

    .tag-delete {
        cursor: pointer;
        color: var(--danger-color);
    }

    /* 消息通知样式 */
    .notification-item {
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: flex-start;
    }

    .notification-icon {
        margin-right: 12px;
        font-size: 20px;
        width: 24px;
        text-align: center;
    }

    .notification-content {
        flex: 1;
    }

    .notification-time {
        color: var(--secondary-color);
        font-size: 12px;
        margin-top: 4px;
    }

    /* 搜索栏样式 */
    .search-bar {
        display: flex;
        margin-bottom: 20px;
    }

    .search-input {
        flex: 1;
        padding: 10px 16px;
        border: 1px solid var(--border-color);
        border-radius: 4px 0 0 4px;
        font-size: 14px;
    }

    .search-btn {
        padding: 10px 20px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
    }

    /* 积分卡片样式 */
    .points-card {
        background: linear-gradient(135deg, #1e80ff, #0d6efd);
        color: white;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .points-value {
        font-size: 36px;
        font-weight: 700;
        margin: 10px 0;
    }

    .points-detail {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .points-item {
        text-align: center;
    }

    .points-item h4 {
        font-size: 24px;
        margin-bottom: 5px;
    }
</style>
{% endblock head %}


<!--中间替换为编辑器-->
{% block bodyMiddle %}
<div class="col-12 usercontainer">
    <!-- 左侧菜单 -->
    <div class="usersidebar">
        <div class="user-profile">
            <img src="../static/img/avatar/{{session.avatar}}" alt="用户头像" class="user-avatar">
            <div class="side-user-info">
                <h3>{{session.nickname}}</h3>
                <p>高级观察员</p>
            </div>
        </div>

        <ul class="u-menu">
            <li class="u-menu-item active" data-target="favorites">
                <i class="fas fa-heart"></i>
                <span>我的收藏</span>
            </li>
            <li class="u-menu-item" data-target="publish">
                <i class="fas fa-pen-fancy"></i>
                <span>发布文章</span>
            </li>
            <li class="u-menu-item" data-target="drafts">
                <i class="fas fa-file-alt"></i>
                <span>我的草稿</span>
            </li>
            <li class="u-menu-item" data-target="articles">
                <i class="fas fa-newspaper"></i>
                <span>我的文章</span>
            </li>
            <li class="u-menu-item" data-target="comments">
                <i class="fas fa-comments"></i>
                <span>我的评论</span>
            </li>
            <li class="u-menu-item" data-target="profile">
                <i class="fas fa-user"></i>
                <span>个人资料</span>
            </li>
            <li class="u-menu-item" data-target="points">
                <i class="fas fa-coins"></i>
                <span>我的积分</span>
            </li>
            <li class="u-menu-item" data-target="notifications">
                <i class="fas fa-bell"></i>
                <span>消息通知</span>
            </li>
            <li class="u-menu-item" data-target="tags">
                <i class="fas fa-tags"></i>
                <span>标签管理</span>
            </li>
        </ul>
    </div>

    <!-- 右侧内容区 -->
    <div class="content">
        <!-- 我的收藏 -->
        <div class="content-section active" id="favorites">
            <div class="section-header">
                <h2 class="section-title">我的收藏</h2>
            </div>

            <ul class="article-list">
                <li class="article-item">
                    <div class="article-header">
                        <a href="#" class="article-title">Vue 3.0 新特性全面解析</a>
                        <button class="btn btn-danger">
                            <i class="fas fa-trash"></i>取消收藏
                        </button>
                    </div>
                    <p>本文详细介绍了Vue 3.0的新特性，包括Composition API、性能优化等内容</p>
                    <div class="article-meta">
                        <span>收藏时间: 2023-07-15</span>
                        <span>作者: 前端大神</span>
                    </div>
                </li>
                <li class="article-item">
                    <div class="article-header">
                        <a href="#" class="article-title">深入理解JavaScript闭包</a>
                        <button class="btn btn-danger">
                            <i class="fas fa-trash"></i>取消收藏
                        </button>
                    </div>
                    <p>闭包是JavaScript中一个重要且难以掌握的概念，本文通过实例带你彻底掌握闭包</p>
                    <div class="article-meta">
                        <span>收藏时间: 2023-07-10</span>
                        <span>作者: JS专家</span>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 发布文章 -->
        <div class="content-section" id="publish">
            <div class="section-header">
                <h2 class="section-title">发布文章</h2>
            </div>

            <div style="text-align: center; padding: 40px 0;">
                <i class="fas fa-pen-fancy"
                   style="font-size: 64px; color: var(--primary-color); margin-bottom: 20px;"></i>
                <h3>开始创作你的技术文章</h3>
                <p style="margin: 20px 0; color: var(--secondary-color);">分享你的知识和经验，帮助更多人成长</p>
                <a href="/post/create">
                <button class="btn btn-primary" href="/post/create" style="padding: 12px 24px;">
                    <i class="fas fa-plus"></i>开始写作
                </button></a>
            </div>
        </div>

        <!-- 我的草稿 -->
        <div class="content-section" id="drafts">
            <div class="section-header">
                <h2 class="section-title">我的草稿</h2>
            </div>

            <table>
                <thead>
                <tr>
                    <th>文章标题</th>
                    <th>创作时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>React Hooks 最佳实践</td>
                    <td>2023-07-18</td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn btn-primary">
                                <i class="fas fa-edit"></i>编辑
                            </button>
                            <button class="btn btn-danger">
                                <i class="fas fa-trash"></i>删除
                            </button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>TypeScript 高级类型编程</td>
                    <td>2023-07-12</td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn btn-primary">
                                <i class="fas fa-edit"></i>编辑
                            </button>
                            <button class="btn btn-danger">
                                <i class="fas fa-trash"></i>删除
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 我的文章 -->
        <div class="content-section" id="articles">
            <div class="section-header">
                <h2 class="section-title">我的文章</h2>
            </div>

            <div class="search-bar">
                <input type="text" class="search-input" placeholder="搜索文章标题或内容">
                <button class="search-btn">搜索</button>
            </div>

            <table>
                <thead>
                <tr>
                    <th>文章标题</th>
                    <th>发布时间</th>
                    <th>发布状态</th>
                    <th>评论数</th>
                    <th>阅读数</th>
                    <th>是否公开</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Webpack 5 完全指南</td>
                    <td>2023-07-20</td>
                    <td>已发布</td>
                    <td>24</td>
                    <td>1,245</td>
                    <td>是</td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn btn-primary">
                                <i class="fas fa-edit"></i>编辑
                            </button>
                            <button class="btn btn-danger">
                                <i class="fas fa-trash"></i>删除
                            </button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Node.js 性能优化</td>
                    <td>2023-07-05</td>
                    <td>已发布</td>
                    <td>36</td>
                    <td>2,187</td>
                    <td>是</td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn btn-primary">
                                <i class="fas fa-edit"></i>编辑
                            </button>
                            <button class="btn btn-danger">
                                <i class="fas fa-trash"></i>删除
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 我的评论 -->
        <div class="content-section" id="comments">
            <div class="section-header">
                <h2 class="section-title">我的评论</h2>
            </div>

            <ul class="article-list">
                <li class="article-item">
                    <a href="#" class="article-title">Vue 3.0 新特性全面解析</a>
                    <div class="article-meta">
                        <span>评论时间: 2023-07-15 14:30</span>
                    </div>
                    <p style="background: #f9f9f9; padding: 12px; border-radius: 6px; margin-top: 8px;">
                        这篇文章写得非常详细，对我帮助很大，特别是Composition API部分！
                    </p>
                </li>
                <li class="article-item">
                    <a href="#" class="article-title">深入理解JavaScript闭包</a>
                    <div class="article-meta">
                        <span>评论时间: 2023-07-10 09:45</span>
                    </div>
                    <p style="background: #f9f9f9; padding: 12px; border-radius: 6px; margin-top: 8px;">
                        闭包确实是JS中比较难理解的概念，作者讲解得很清晰，例子也很实用。
                    </p>
                </li>
            </ul>
        </div>

        <!-- 个人资料 -->
        <div class="content-section" id="profile">
            <div class="section-header">
                <h2 class="section-title">个人资料</h2>
            </div>

            <div style="display: flex; gap: 30px;">
                <div style="flex: 1;">
                    <div class="form-group">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-control" value="技术小达人">
                    </div>

                    <div class="form-group">
                        <label class="form-label">个人简介</label>
                        <textarea class="form-control" rows="4">热爱前端开发，喜欢分享技术经验</textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-control" value="example@email.com">
                    </div>

                    <div class="form-group">
                        <label class="form-label">职业</label>
                        <input type="text" class="form-control" value="高级前端工程师">
                    </div>
                </div>

                <div style="width: 200px; text-align: center;">
                    <img src="../static/img/avatar/{{session.avatar}}" alt="头像"
                         style="width: 150px; height: 150px; border-radius: 50%; margin-bottom: 16px;">
                    <button class="btn btn-primary">
                        <i class="fas fa-upload"></i>更换头像
                    </button>
                </div>
            </div>

            <button class="btn btn-primary" style="margin-top: 20px;">
                <i class="fas fa-save"></i>保存更改
            </button>
        </div>

        <!-- 我的积分 -->
        <div class="content-section" id="points">
            <div class="section-header">
                <h2 class="section-title">我的积分</h2>
            </div>

            <div class="points-card">
                <p>当前积分</p>
                <div class="points-value">1,245</div>
                <p>积分排名: 前 12%</p>

                <div class="points-detail">
                    <div class="points-item">
                        <p>获得积分</p>
                        <h4>1,580</h4>
                    </div>
                    <div class="points-item">
                        <p>扣除积分</p>
                        <h4>335</h4>
                    </div>
                </div>
            </div>

            <table>
                <thead>
                <tr>
                    <th>时间</th>
                    <th>类型</th>
                    <th>积分变化</th>
                    <th>详情</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2023-07-20 14:30</td>
                    <td>发布文章</td>
                    <td style="color: var(--success-color);">+50</td>
                    <td>文章《Webpack 5 完全指南》获得推荐</td>
                </tr>
                <tr>
                    <td>2023-07-18 09:15</td>
                    <td>文章点赞</td>
                    <td style="color: var(--success-color);">+5</td>
                    <td>文章获得20个赞</td>
                </tr>
                <tr>
                    <td>2023-07-15 16:40</td>
                    <td>下载资源</td>
                    <td style="color: var(--danger-color);">-10</td>
                    <td>下载《前端性能优化手册》</td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 消息通知 -->
        <div class="content-section" id="notifications">
            <div class="section-header">
                <h2 class="section-title">消息通知</h2>
            </div>

            <div class="notification-item">
                <div class="notification-icon" style="color: var(--primary-color);">
                    <i class="fas fa-comment"></i>
                </div>
                <div class="notification-content">
                    <p><strong>前端小白</strong> 评论了你的文章 <a href="#">《Vue 3.0 新特性全面解析》</a></p>
                    <p style="background: #f9f9f9; padding: 8px; border-radius: 4px; margin-top: 6px;">
                        写得真不错，学到了很多！
                    </p>
                    <div class="notification-time">2小时前</div>
                </div>
            </div>

            <div class="notification-item">
                <div class="notification-icon" style="color: var(--warning-color);">
                    <i class="fas fa-thumbs-up"></i>
                </div>
                <div class="notification-content">
                    <p><strong>React开发者</strong> 等15人赞了你的文章 <a href="#">《React Hooks 最佳实践》</a></p>
                    <div class="notification-time">昨天 14:30</div>
                </div>
            </div>

            <div class="notification-item">
                <div class="notification-icon" style="color: var(--success-color);">
                    <i class="fas fa-reply"></i>
                </div>
                <div class="notification-content">
                    <p><strong>JS专家</strong> 回复了你的评论 <a href="#">《深入理解JavaScript闭包》</a></p>
                    <p style="background: #f9f9f9; padding: 8px; border-radius: 4px; margin-top: 6px;">
                        感谢你的补充，这个例子确实更清晰！
                    </p>
                    <div class="notification-time">2023-07-18</div>
                </div>
            </div>
        </div>

        <!-- 标签管理 -->
        <div class="content-section" id="tags">
            <div class="section-header">
                <h2 class="section-title">标签管理</h2>
                <button class="btn btn-primary">
                    <i class="fas fa-plus"></i>新增标签
                </button>
            </div>

            <div class="tags-container">
                <div class="tag">
                    <span>JavaScript</span>
                    <span class="tag-edit"><i class="fas fa-edit"></i></span>
                    <span class="tag-delete"><i class="fas fa-times"></i></span>
                </div>
                <div class="tag">
                    <span>Vue</span>
                    <span class="tag-edit"><i class="fas fa-edit"></i></span>
                    <span class="tag-delete"><i class="fas fa-times"></i></span>
                </div>
                <div class="tag">
                    <span>React</span>
                    <span class="tag-edit"><i class="fas fa-edit"></i></span>
                    <span class="tag-delete"><i class="fas fa-times"></i></span>
                </div>
                <div class="tag">
                    <span>Node.js</span>
                    <span class="tag-edit"><i class="fas fa-edit"></i></span>
                    <span class="tag-delete"><i class="fas fa-times"></i></span>
                </div>
                <div class="tag">
                    <span>TypeScript</span>
                    <span class="tag-edit"><i class="fas fa-edit"></i></span>
                    <span class="tag-delete"><i class="fas fa-times"></i></span>
                </div>
            </div>

            <div style="margin-top: 30px;">
                <h3 style="margin-bottom: 16px;">添加新标签</h3>
                <div style="display: flex; gap: 10px;">
                    <input type="text" class="form-control" placeholder="输入标签名称" style="max-width: 300px;">
                    <button class="btn btn-primary">添加</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock bodyMiddle %}


{% block footjs %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 菜单切换功能
        const menuItems = document.querySelectorAll('.u-menu-item');
        const contentSections = document.querySelectorAll('.content-section');

        menuItems.forEach(item => {
            item.addEventListener('click', function () {
                const target = this.getAttribute('data-target');

                // 更新菜单激活状态
                menuItems.forEach(mi => mi.classList.remove('active'));
                this.classList.add('active');

                // 更新内容区显示
                contentSections.forEach(section => {
                    section.classList.remove('active');
                    if (section.id === target) {
                        section.classList.add('active');
                    }
                });
            });
        });

        // 模拟发布文章按钮点击
        document.querySelector('[data-target="publish"]').addEventListener('click', function () {
            // 在实际应用中，这里可以跳转到发布页面
            console.log('跳转到发布文章页面');
            // setTimeout(function () {
            //     window.location.href = '/post/create'
            // }, 1500)
        });

        // 模拟取消收藏功能
        const cancelButtons = document.querySelectorAll('#favorites .btn-danger');
        cancelButtons.forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const articleItem = this.closest('.article-item');
                articleItem.style.opacity = '0';
                setTimeout(() => {
                    articleItem.remove();
                }, 300);
            });
        });

        // 模拟草稿删除功能
        const draftDeleteButtons = document.querySelectorAll('#drafts .btn-danger');
        draftDeleteButtons.forEach(button => {
            button.addEventListener('click', function () {
                const row = this.closest('tr');
                row.style.opacity = '0';
                setTimeout(() => {
                    row.remove();
                }, 300);
            });
        });
    });
</script>

{% endblock footjs %}